<template>
  <el-row :gutter="20">
    <div class="search-bar">
      <el-input
          v-model="query"
          placeholder="请输入关键词"
          @input="onSearch"
          prefix-icon="el-icon-search"
          size="large"
      />
    </div>
    <el-button class="serch-button" type="primary" round  @click="handleClick">Search</el-button>
  </el-row>
</template>

<script setup>
import { ref} from 'vue';
import { useRouter } from 'vue-router'; // 引入 vue-router
import {useTokenStore} from '@/stores/token.js'
import axios from "axios";
import {getHotWords} from "@/api/search.js";
import {getLists} from "@/api/search.js";


const query = ref('');
const router = useRouter(); // 获取路由实例
const searchData = ref('');

const tokenStore = useTokenStore()

const getComKey = async () =>{
   const result = await getLists(query.value);
   searchData.value = result.data;
}


const emit = defineEmits(['searchData'])
const handleClick = async () => {
  // 参数1：事件名
  // 参数2：传给父组件的值
  await getComKey();
  emit('searchData', searchData)
}

/*// 当用户点击搜索按钮时调用该方法
const handleSearch = () => {
  if (!query.value.trim()) {
    // 使用 message 提示框，前提是你已经正确引入了相应的 UI 组件库
    this.$message.warning('请输入搜索关键词');
    return;
  }

  // 发起请求
  axios.get('你的接口地址', { params: { query: query.value } })
      .then((response) => {
        console.log(response.data);
        tokenStore.setToken(response.data)
        // 在这里处理返回的数据，例如更新界面
        // this.results = response.data;
      })
      .catch((error) => {
        console.error(error);
        this.$message.error('请求失败，请稍后再试');
      });
};*/



const onSearch = () => {
  // 如果已登录，进行搜索操作
  console.log(`搜索关键词: ${query.value}`);
};
</script>

<style scoped>
.search-bar {
  margin: 20px auto;
  width: 400px;
}
.serch-button {
  width: 150px;
  height: 40px;
  margin: 20px auto;
}
</style>